<script setup>
    const props = defineProps({
      currentPage: {// 当前页码
        type: Number,
        required: true
      },
      totalPages: {// 总页数
        type: Number,
        required: true
      },
      totalItems: {// 总条数
        type: Number,
        required: true
      },
      page_size: {// 每页显示条数
        type: Number,
        required: true
      },
    })

    const emit = defineEmits(['page-change'])

    const jumpPage = ref(props.currentPage)

    // 计算显示的页码
    const displayedPages = computed(() => {
  const pages = []
  const maxVisiblePages = 5 // 设置最大可见页码数
  let start = Math.max(1, props.currentPage - Math.floor(maxVisiblePages / 2))
  let end = Math.min(props.totalPages, start + maxVisiblePages - 1)

  // 调整起始页码，确保显示足够的页码
  if (end - start + 1 < maxVisiblePages) {
    start = Math.max(1, end - maxVisiblePages + 1)
  }

  // 添加首部省略号
  if (start > 1) {
    pages.push(1)
    if (start > 2) pages.push('...')
  }

  // 添加中间页码
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }

  // 添加尾部省略号
  if (end < props.totalPages) {
    if (end < props.totalPages - 1) pages.push('...')
    pages.push(props.totalPages)
  }

  return pages
})


    // 页码点击处理
    const handlePageChange = (page) => {
      if (page < 1 || page > props.totalPages || page === props.currentPage) return
      emit('page-change', page)
    }

</script>
<template>
    <div class="pagination-container" v-if="totalPages > 1">
        <div class="pagination-wrapper">
            <!-- 首页 -->
            <button
                class="pagination-item first"
                :disabled="currentPage === 1"
                @click="handlePageChange(1)"
            >首页</button>

            <!-- 上一页 -->
            <button
                class="pagination-item prev"
                :disabled="currentPage === 1"
                @click="handlePageChange(currentPage - 1)"
            >‹</button>

            <!-- 页码 -->
            <template v-for="page in displayedPages" :key="page">
                <span
                    v-if="page === '...'"
                    class="pagination-ellipsis"
                >...</span>
                <button
                    v-else
                    class="pagination-number"
                    :class="{ active: page === currentPage }"
                    @click="handlePageChange(page)"
                >{{ page }}</button>
            </template>

            <!-- 下一页 -->
            <button
                class="pagination-item next"
                :disabled="currentPage === totalPages"
                @click="handlePageChange(currentPage + 1)"
            >›</button>

            <!-- 尾页 -->
            <button
                class="pagination-item last"
                :disabled="currentPage === totalPages"
                @click="handlePageChange(totalPages)"
            >尾页</button>
        </div>

        <div class="pagination-info" v-if="totalPages > 0">
            第{{ currentPage }} 页 / 共{{ totalPages }} 页
        </div>
    </div>
</template>

<style scoped>

.pagination-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

.pagination-wrapper {
    display: flex;
    margin-bottom: 12px;
}

.pagination-item,
.pagination-number {
    min-width: 32px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--page-text-color,#e4e7ed);
    background: var(--page-bg-color,#fff);
    color: var(--page-text-color,#606266);
    cursor: pointer;
    transition: all 0.2s;
}
.pagination-item:hover,
.pagination-number:hover {
    background-color: var(--page-primary-color,#409eff);
}

.pagination-item:first-child{
    border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.pagination-item:last-child{
    border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.pagination-item:hover:not(:disabled),
.pagination-number:hover:not(.active) {
    border-color: var(--page-hover-color,#409eff);
    color: var(--page-hover-text-color,#fff);
}

/* 禁用的项（首页或尾页不可点击时） */
.pagination-item:disabled {
  cursor: not-allowed;
  background-color: var(--page-disabled-bg-color,#f5f5f5);
  color: var(--page-disabled-text-color,#606266);
  border: 1px solid var(--page-disabled-border-color,#ddd);
}
/* 活动页码的样式 */
.pagination-number.active {
  border: 1px solid var(--page-active-border-color,#409eff);
  background-color: var(--page-active-bg-color,#409eff);
  color: var(--page-active-text-color,#fff);
}

.pagination-number.active:hover {
  background-color: var(--page-active-hover-bg-color,#66b1ff);
}
.pagination-ellipsis {
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: var(--page-text-color,#e6e6e6);
    background:var(--page-bg-color,#fff);
    border: 1px solid var(--page-text-color,#e4e7ed);
}

.pagination-info {
    color: var(--page-spr-color,#606266);
    font-size: 14px;
}
</style>
